<template>
    <nly-content-wrapper class="activity content-warpper-2">
        <div class="content-header-2">
            <!--按钮-->
            <div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">
                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <a-col :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl" v-if="addBtnShow">
                            <div class="btns" @click="AddItem">
                                <a-icon class="btns-icon" type="file-add" />
                                <div class="btns-text">新增</div>
                            </div>
                        </a-col>
                        <a-col :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl" v-if="editBtnShow">
                            <div class="btns" @click="EdiItem()">
                                <a-icon class="btns-icon" type="edit" />
                                <div class="btns-text">编辑</div>
                            </div>
                        </a-col>
                        <a-col :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl" v-if="disableBtnShow">
                            <div style="position:relative">
                                <div class="btns" @click="batchDelete">
                                    <a-icon class="btns-icon" type="delete" />
                                    <div class="btns-text">删除</div>
                                </div>
                                <div style="position:absolute;width:2px;height:36px;border-radius:6px;background:#ccc;top:0px;right:0px;"></div>
                            </div>
                        </a-col>
                        <a-col :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl">
                            <div class="btns" @click="onSerch">
                                <a-icon class="btns-icon" type="file-search" />
                                <div class="btns-text">查询</div>
                            </div>
                        </a-col>
                        <a-col :xs="btnGrid.xs" :sm="btnGrid.sm" :md="btnGrid.md" :lg="btnGrid.lg" :xl="btnGrid.xl">
                            <div class="btns" @click="reset">
                                <a-icon class="btns-icon" type="undo" />
                                <div class="btns-text">重置</div>
                            </div>
                        </a-col>
                    </a-col>
                </a-row>
            </div>

            <nly-row class="col-12">
                <nly-row class="col-12 ">
                    <nly-col class="form-inline" style="height:40px;">
                        <form-input title="市场活动名称" rightStyle="width:120px;" class="ml-2" v-model="postData.activityTitle"></form-input>
                        <form-select title="类型" class="ml-2" addDefaultText="全部" rightStyle="width:120px;" v-model="postData.activityType" :dataList="activityTypeList"></form-select>
                        <form-select title="状态" class="ml-2" addDefaultText="全部" rightStyle="width:120px;" v-model="postData.activityState" :dataList="activityStateList"></form-select>
                        <form-input title="负责人" rightStyle="width:120px;" class="ml-2" v-model="postData.activityOwnerName"></form-input>
                    </nly-col>
                    <!-- <div>
                        <nly-button-group>
                            <nly-button variant="info" @click="onSerch" button-class="mr-2">查询</nly-button>
                            <nly-button variant="info" button-class="mr-2" @click="reset">重置</nly-button>
                            <nly-button @click="showFunction" variant="info" button-class="mr-2">
                                <i :class="show ? 'fas fa-angle-down mr-1' : 'fas fa-angle-up mr-1'" />
                                {{ show ? "折叠" : "展开" }}
                            </nly-button>
                        </nly-button-group>
                    </div> -->
                </nly-row>

                <nly-row class="ml-1 mb-2 lr mt-4" v-show="show">
                    <nly-col xs="12" sm="12" md="12" lg="12" xl="12" class="form-inline" style="justify-content: left;">

                    </nly-col>
                </nly-row>
            </nly-row>
            <nly-container fluid></nly-container>
        </div>

        <!-- <div>
            <a-button type="primary" class="crm-btn" @click="EdiItem()" v-if="editBtnShow">编辑</a-button>
            <a-button type="primary" class="crm-btn" @click="batchDelete" v-if="disableBtnShow">删除</a-button>
            <a-button type="primary" class="crm-btn" @click="AddItem" v-if="addBtnShow">新增</a-button>
        </div> -->
        <nly-content>
            <!-- 列表 -->
            <a-table :columns="columns" :components="components" :data-source="data" :scroll="{ y: 500,x:100}" bordered :pagination="pagination" @change="onTableChange" :row-selection="{selectedRowKeys: selectedKeys, onChange: selection,columnWidth:30}">
                <a slot="formatTitle" slot-scope="text, record" @click="EdiItem(record)" class="goToDetail">
                    {{text}}
                </a>
            </a-table>
            <!-- modal 弹窗  -->
            <drag-modal :visible="ModalVisible" :width="900" @cancel="hideModal" :title="form.id ? '编辑市场活动' : '新增市场活动'" :footer="null">
                <div class="components-form-demo-advanced-search">
                    <a-form-model ref="ruleForm" :model="form" :rules="rules" v-bind="layout" class="modal2021-8-28-102346">
                        <!-- 基本信息 分割线 -->
                        <a-row>
                            <a-col :span="12">
                                <a-form-model-item label="市场活动名称" prop="activityTitle">
                                    <a-input v-model="form.activityTitle" />
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12">
                                <!-- 类型：会议 网络研讨会 交易会 公开媒介 合作伙伴 推举程序 广告 条幅广告 直接邮件 电子邮件 电子市场 其它 -->
                                <a-form-model-item label="类型" prop="activityType" class="editIcon-item">
                                    <a-select v-model="form.activityType" placeholder="请选择类型">
                                        <a-select-option :value="item.key" v-for="(item,index) in activityTypeList" :key="index">{{item.title}}</a-select-option>
                                    </a-select>
                                    <a v-if="permissions.includes('crm:activity:defineField')" @click="editItemValFnInRow(activityTypeField)" class="editIcon">
                                        <a-icon type="edit" theme="twoTone" title="编辑下拉框内容" />
                                    </a>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="12">
                                <!-- 状态：计划中 激活的 非活跃 完成 -->
                                <a-form-model-item label="状态" prop="activityState">
                                    <a-select v-model="form.activityState" placeholder="请选择状态">
                                        <a-select-option v-for="(item,index) in activityStateList" :key="index" :value="item.key">{{item.title}}</a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-model-item ref="name" label="负责人" prop="activityOwnerId">
                                    <input-group-search modalTitle="选择拥有者" labelStyle="display:none;" rightClass="myRightClass" class="ml-1 mb-2" :required="true" v-model="form.activityOwnerId" :valueTitle.sync="form.activityOwnerName" treeType="officeUser" :clearValueIcon="false"></input-group-search>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="12">
                                <a-form-model-item label="开始时间" prop="startTime">
                                    <form-date-picker :format="'YYYY-MM-DD HH:mm'" :showTime="true" labelStyle="display:none;" rightClass="width: 100%;" :required="true" class="ml-1 mb-2" :disabledDate="disabledStartDate" v-model="form.startTime" :momentDate.sync="startTimeDate"></form-date-picker>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-model-item label="结束时间" prop="endTime">
                                    <form-date-picker :format="'YYYY-MM-DD HH:mm'" :showTime="true" labelStyle="display:none;" rightClass="width: 100%;" :required="true" class="ml-1 mb-2" :disabledDate="disabledEndDate" v-model="form.endTime" :momentDate.sync="endTimeDate"></form-date-picker>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="12">
                                <a-form-model-item label="预期收益(元)" prop="anticipatedRevenue">
                                    <a-input-number :min="0" :formatter="value => `¥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')" :parser="value => value.replace(/\¥\s?|(,*)/g, '')" v-model="form.anticipatedRevenue" :precision="0" :step="100" style="width:100%;" />
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-model-item label="预算成本(元)" prop="budgetCost">
                                    <a-input-number :min="0" :formatter="value => `¥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')" :parser="value => value.replace(/\¥\s?|(,*)/g, '')" v-model="form.budgetCost" :precision="0" :step="100" style="width:100%;" />
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="12">
                                <a-form-model-item label="实际成本(元)" prop="actualCost">
                                    <a-input-number :min="0" :formatter="value => `¥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')" :parser="value => value.replace(/\¥\s?|(,*)/g, '')" v-model="form.actualCost" :precision="0" :step="100" style="width:100%;" />
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-model-item label="期望成功率(%)" prop="expectedSuccessRate">
                                    <a-input-number :min="0" :max="100" :formatter="value => `${value}%`" :parser="value => value.replace('%', '')" :precision="0" :step="10" v-model="form.expectedSuccessRate" style="width:100%;" />
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-tabs default-active-key="1">
                            <a-tab-pane key="1" tab="商机(非必填)">
                                <a-row class="mb-1">
                                    <a-button type="primary" class="crm-btn" @click="batchDeleteBusiness">移除商机</a-button>
                                    <a-button type="primary" class="crm-btn ml-3" @click="showBusinessSelect">分配商机</a-button>
                                </a-row>
                                <a-row>
                                    <a-table style="min-height:200px" :columns="businessColumns" :components="businessComponents" :data-source="businessData" :scroll="{ y: 500}" :row-selection="{selectedRowKeys: selectedBSKeys, onChange: onSelectBusiness}" bordered></a-table>
                                </a-row>

                            </a-tab-pane>
                        </a-tabs>
                    </a-form-model>
                </div>
                <template slot="footer">
                    <a-button type="primary" @click="submitForm('ruleForm')" v-if="!form.id || (form.id && (form.activityOwnerId == userInfo.id || form.createUserId == userInfo.id)) ">
                        保存
                    </a-button>
                </template>
            </drag-modal>
            <!-- 编辑自定义字段 -->
            <a-modal title="编辑" :visible="listDataVisible" @cancel="hideListDataModal" :footer="null">
                <list-data-manager :list="listData" v-model="editItemVal" :callBack="SaveAllEditItems" submitBtnTitle="" submitBtnText="保 存">
                </list-data-manager>
            </a-modal>
            <!-- 选择商机 -->
            <a-modal title="选择商机" :visible="selectBusinessVisible" @cancel="hideBusinessSelect" width="50%" :footer="null">
                <select-business :data="noBusinessDataNow" v-model="selectedBusinessRows" :disableKeys="disableKeys">
                </select-business>
                <nly-row style="justify-content: flex-end;">
                    <nly-button class="mt-3 mr-3" @click="updateOrgBusinessData" variant="info">确定</nly-button>
                </nly-row>
            </a-modal>
        </nly-content>
    </nly-content-wrapper>
</template>

<script>

import { mapState } from "vuex";

import {
    save,
    pageList,
    detail,
    batchDelete,
    checkActivityTitle as check
} from "@/api/crm/activity";
import { listToMap } from "@/utils/tool/map";
import { components } from "@/utils/antTableComponents";
import { DefineFieldList, DefineFieldBatchSave } from "@/api/crm/set";
import { ListDataManager } from "@/components/Customize";
import selectBusiness from "../business/selectBusiness";
import { listNoDistributeCrmBusiness, listActivityBusiness } from "@/api/crm/business";
import { deepCopy } from "@/utils/tool/object";

export default {
    components: {
        ListDataManager,
        selectBusiness
    },
    data () {
        const columns = [
            {
                title: "市场活动名称",
                dataIndex: "activityTitle",
                key: "activityTitle",
                width: 120,
                align: "left",
                scopedSlots: { customRender: 'formatTitle' },
            },
            {
                title: "类型",
                dataIndex: "activityType",
                key: "activityType",
                width: 60
            },
            {
                title: "状态",
                dataIndex: "activityState",
                key: "activityState",
                width: 60
            },
            {
                title: "负责人",
                dataIndex: "activityOwnerName",
                key: "activityOwnerName",
                width: 60,

            },
            {
                title: "活动时间",
                dataIndex: "startTime",
                key: "startTime",
                customRender: (text, record, index) => {
                    return `${text} ~ ${record.endTime}`
                },
                width: 150
            },
            {
                title: "创建人",
                dataIndex: "createUserName",
                key: "createUserName",
                width: 60
            },
            {
                title: "创建时间",
                dataIndex: "createDate",
                key: "createDate",
                width: 120
            },
            {
                title: "修改人",
                dataIndex: "updateUserName",
                key: "updateUserName",
                width: 60
            },
            {
                title: "修改时间",
                dataIndex: "updateDate",
                key: "updateDate",
                width: 120
            },
        ];
        //商机 列表 字段
        const businessColumns = [
            {
                title: "客户名称",
                dataIndex: "crmName",
                key: "crmName",
                align: "left",
                width: 120,
            },
            {
                title: "商机名称",
                dataIndex: "title",
                key: "businessTitle",
                width: 120
            },
            {
                title: "商机编号",
                dataIndex: "projectNo",
                key: "projectNo",
                width: 120
            },
            {
                title: "销售阶段",
                dataIndex: "saleStage",
                key: "saleStage",
                width: 120
            },
            {
                title: "预计收入(元)",
                dataIndex: "anticipatedRevenue",
                key: "anticipatedRevenue",
                width: 120
            },
        ];
        //状态：计划中 激活的 非活跃 完成
        const activityStateList = [
            { key: "计划中", title: '计划中' },
            { key: "执行中", title: '执行中' },
            { key: "中止", title: '中止' },
            { key: "完成", title: '完成' },
        ];


        /****  校验方法 ****/

        //2.
        let selectOwner = (rule, value, callback) => {
            if (!value) {
                callback(new Error('拥有者不能为空'));
            } else {
                callback();
            }
        };
        /****  校验方法 ****/
        //表格 头部 可伸缩
        this.components = components(columns);
        this.businessComponents = components(businessColumns);
        return {
            //----------↓样式----------
            btnGrid: {
                xs: 2,
                sm: 2,
                md: 2,
                lg: 2,
                xl: 2
            },
            //----------↑样式----------

            //gw 2021年8月16日11:04:08
            visibleSearchPlan: false,
            //gw 2021年8月16日11:04:16
            noBusinessDataNow: [],                 //现在为分配的商机数据
            noBusinessData: [],                  //未分配的 商机数据
            selectBusinessVisible: false,        //是否 显示 分配商机
            selectedBusinessRows: [],            //当前分配的商机
            selectedRemoveRows: [],               //当前移除的商机
            disableKeys: [],                     //禁止选择的项
            selectedBSKeys: [],                  //已经选择的商机Key
            selectedBSIds: [],                   //已经选择的商机Ids
            orgBusinessData: [],                   //原有市场活动商机
            orgBusinessDataIds: [],               //原有市场活动商机Ids
            businessData: [],                     //显示市场活动商机
            businessDataIds: [],                  //显示市场活动商机Ids
            businessColumns,
            listDataVisible: false,             //是否显示 数组
            listData: [],
            localEditItem: {},
            editItemVal: "",
            activityFieldList: [],             //租户市场活动自定义字段
            activityStateList,
            basePostData: {},
            postData: {
                page: {
                    current: 1,
                    size: 10
                }
            },
            data: [],                           //市场活动列表数据
            columns,
            startTimeDate: null,
            endTimeDate: null,
            pagination: {
                defaultPageSize: 20,
                current: 1,
                pageSize: 20,
                total: 0,
                showTotal: total => {
                    return (
                        <div>
                            共 {total} 条数据，每页
                            <a-input-number
                                value={this.pagination.pageSize}
                                min={1}
                                max={500}
                                onPressEnter={e => this.changePageSize(e)}
                            />
                            条
                        </div>
                    );
                },
                showQuickJumper: true,
                showLessItems: true
            },
            show: false, //是否显示
            editItem: {}, //新增/编辑对象
            selectedKeys: [],
            selectIds: [],
            selectedData: [],
            ModalVisible: false,
            layout: {
                labelCol: { span: 6 },
                wrapperCol: { span: 16 },
            },
            form: {
                activityOwnerId: null,      //拥有者ID
                activityOwnerName: "",       //拥有者姓名
                activityTitle: "",           //活动名称
                activityType: "",           //类型：会议 网络研讨会 交易会 公开媒介 合作伙伴 推举程序 广告 条幅广告 直接邮件 电子邮件 电子市场 其它
                activityState: "",          //状态：计划中 激活的 非活跃 完成
                startTime: "",              //开始时间
                endTime: "",                 //结束时间
                anticipatedRevenue: null,    //预期收益(元)
                budgetCost: null,           //预算成本（元）
                actualCost: null,           //实际成本（元）
                expectedSuccessRate: null,  //期望成功率（%）
            },
            rules: {
                activityOwnerId: [
                    { required: true, validator: selectOwner, trigger: 'change' },
                ],
                activityTitle: [{ required: true, validator: this.checkActivityTitle, trigger: 'blur' }],
                activityType: [{ required: true, message: '请选择类型', trigger: 'change' }],
                activityState: [{ required: true, message: '请选择状态', trigger: 'change' }],
                startTime: [
                    { required: true, message: '请填写开始时间', trigger: 'change' },
                ],
                endTime: [
                    { required: true, message: '请填写结束时间', trigger: 'change' },
                ],
            },
        };
    },
    created () {
        this.basePostData = {
            current: 1,
            size: 20,
        };
        this.postData = { ...this.basePostData };
        this.showEdit();
    },
    activated () {
        this.showEdit();
        this.LiDefineFieldListst();
        this.PageList();
    },
    computed: {
        //商机列表数组
        // businessList: function () {
        //     const { businessData, selectedBusinessRows } = this;
        //     return [...businessData, ...selectedBusinessRows];
        // },
        // 活动类型 下拉框 数据
        activityTypeList: function () {
            let list = new Array();
            const { activityFieldList } = this;
            let item = activityFieldList.find(f => f.code == "activityType");
            if (item) {
                item.val.split(",").forEach(f => {
                    list.push({
                        key: f,
                        title: f
                    });
                });
            }
            return list;
        },
        //活动类型 自定义
        activityTypeField: function () {
            const { activityFieldList } = this;
            let item = activityFieldList.find(f => f.code == "activityType");
            return item || [];
        },
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
        //是否显示 新增按钮 
        addBtnShow: function () {
            const { permissions, userInfo } = this;
            let isShow = false;
            if (
                (permissions.includes("crm:activity:add")

                )
            ) {
                isShow = true;
            }
            return isShow;
        },
        //是否显示 编辑按钮 
        editBtnShow: function () {
            const { permissions, userInfo } = this;
            let isShow = false;
            if (
                (permissions.includes("crm:activity:edit")

                )
            ) {
                isShow = true;
            }
            return isShow;
        },
        //是否显示 删除按钮 
        disableBtnShow: function () {
            const { permissions, userInfo } = this;
            let isShow = false;
            if (
                (permissions.includes("crm:activity:delete")

                )
            ) {
                isShow = true;
            }
            return isShow;
        },
    },
    methods: {
        showEdit () {
            let id = this.$route.query.id;
            if (id) {
                detail({ id }).then(response => {
                    if (response.code === 200) {
                        const { data } = response;
                        this.EdiItem(data);
                    }
                })
                    .catch(error => { });
            }
        },
        disabledStartDate (startValue) {
            const { endTimeDate } = this;
            if (!startValue || !endTimeDate) {
                return false;
            }
            return startValue.valueOf() >= endTimeDate.valueOf();
        },
        disabledEndDate (endValue) {
            const { startTimeDate } = this;
            if (!endValue || !startTimeDate) {
                return false;
            }
            return startTimeDate.valueOf() >= endValue.valueOf();
        },
        //获取 市场活动关联的商机
        listActivityBusiness (activityId) {
            listActivityBusiness({ activityId })
                .then(response => {
                    if (response.code === 200) {
                        let { data } = response;
                        this.businessData = data;
                        this.orgBusinessData = deepCopy(data, false);
                        if (data) {
                            this.businessDataIds = data.map(f => f.id);
                            this.orgBusinessDataIds = this.orgBusinessData.map(f => f.id);
                        }

                    }
                })
                .catch(error => { });
        },
        //获取 未分配的商机
        listNoDistributeCrmBusiness () {
            listNoDistributeCrmBusiness()
                .then(response => {
                    if (response.code === 200) {
                        let { data } = response;
                        this.noBusinessData = data;
                        this.noBusinessDataNow = deepCopy(data, false);
                    }
                })
                .catch(error => { });
        },
        //移除商机
        batchDeleteBusiness () {
            const { selectedRemoveRows, businessData, noBusinessDataNow } = this;
            if (selectedRemoveRows.length < 1) {
                this.$message.warn("请选择一条数据");
                return false;
            }
            //选中的商机
            let filterBusinessData = businessData.filter(f => !selectedRemoveRows.includes(f));
            noBusinessDataNow.push(...selectedRemoveRows);
            Object.assign(this, {
                businessData: filterBusinessData,
                selectedRemoveRows: [],
                selectedBSKeys: []
            })
        },
        //选择 商机 事件
        onSelectBusiness (selectedRowKeys, selectedRows) {

            this.selectedRemoveRows = selectedRows;
            this.selectedBSKeys = selectedRowKeys;
        },
        //选择商机 确定
        updateOrgBusinessData () {
            let { selectedBusinessRows, businessData, noBusinessDataNow } = this;
            noBusinessDataNow = noBusinessDataNow.filter(item => !selectedBusinessRows.includes(item));
            businessData.push(...selectedBusinessRows);
            selectedBusinessRows = [];
            Object.assign(this, { noBusinessDataNow, businessData, selectedBusinessRows });
            this.hideBusinessSelect();
        },

        hideBusinessSelect () {
            this.selectBusinessVisible = false;
        },
        showBusinessSelect () {
            this.selectBusinessVisible = true;
            console.log("this.selectedBusinessRows", this.selectedBusinessRows)
        },

        editItemValFnInRow (row) {
            this.localEditItem = row;
            this.editItemVal = this.localEditItem.val;
            this.editItemValFn();
        },
        //编辑 自定义字段 的val数组
        editItemValFn () {
            this.listData = this.editItemVal ? this.editItemVal.split(",") : [];
            this.listDataVisible = true;
        },

        hideListDataModal () {
            this.listDataVisible = false;
        },
        //批量保存
        SaveAllEditItems () {
            this.localEditItem.val = this.editItemVal;
            this.localEditItem.isEdit = true;
            //1.筛选 isEdit = true 的记录
            console.log("市场活动：this.activityFieldList", this.activityFieldList);
            let editList = this.activityFieldList.filter(f => f.isEdit);
            if (!editList || editList.length == 0) {
                this.$info({
                    title: "提示",
                    content: '你没有做任何修改',

                });
                return false;
            }
            DefineFieldBatchSave(editList)
                .then(response => {
                    if (response.code === 200) {
                        this.$message.success("保存成功");
                        //关闭对话 框
                        this.hideListDataModal();
                    }
                })
        },
        //获取 活动 自定义字段
        LiDefineFieldListst () {
            DefineFieldList({ source: "activity" })
                .then(response => {
                    if (response.code === 200) {
                        const { data } = response;
                        this.activityFieldList = data;
                    }
                })
                .catch(error => { });
        },
        //1.检查是否存在市场活动名称
        checkActivityTitle (rule, value, callback) {
            const { form } = this;
            const { id } = form;
            if (!value) {
                callback(new Error('市场活动名称不能为空'));
            } else {
                check({ id, activityTitle: value }).then(response => {
                    if (response.code === 200) {
                        if (response.data) {
                            callback(new Error('市场活动名称已经存在'));
                        } else {
                            callback();
                        }
                    }
                })
                    .catch(error => { });
            }
        },
        //添加
        AddItem () {
            this.listNoDistributeCrmBusiness();
            console.log("this.userInfo", this.userInfo);
            this.form = { activityOwnerId: this.userInfo.id, activityOwnerName: this.userInfo.name };
            this.ModalVisible = true;

        },
        //编辑
        EdiItem (record) {
            this.listNoDistributeCrmBusiness();
            const { editBtnShow } = this;
            if (!editBtnShow) {
                return false;
            }
            if (!record) {
                if (this.selectedData.length != 1) {
                    this.$message.warn("请选择一条数据");
                    return false;
                }
                this.form = { ...this.selectedData[0] };
            } else {
                this.form = { ...record };
            }
            this.listActivityBusiness(this.form.id);
            this.ModalVisible = true;
        },
        //批量删除
        batchDelete () {
            if (this.selectedKeys.length < 1) {
                this.$message.warn("请选择要删除的市场活动");
                return false;
            }
            let _this = this;
            this.$confirm({
                title: '确认',
                content: '您确定要删除吗，删除后数据不能恢复？',
                onOk () {
                    batchDelete(_this.selectIds)
                        .then(response => {
                            if (response.code === 200) {
                                _this.$message.success("删除成功");
                                //刷新 列表
                                _this.PageList();
                                _this.selectedKeys = [];
                            }
                        })
                },
                onCancel () { },
            });

        },
        onSerch () {
            this.postData.current = 1;
            this.PageList();
        },
        // 获取列表
        PageList () {
            const { postData } = this;
            pageList(postData)
                .then(response => {
                    if (response.code === 200) {
                        const { data } = response;
                        const { records, total, current, size } = data;
                        this.data = records;
                        Object.assign(this.pagination, {
                            total
                        });
                    }
                })
                .catch(error => { });
        },
        //获取
        showFunction () {
            this.show = !this.show;
        },
        showModal (editItem) {
            this.form = { ...editItem };
            this.ModalVisible = true;
        },
        hideModal () {
            this.ModalVisible = false;
            this.resetForm("ruleForm");
            Object.assign(this, {
                businessDataIds: [],
                businessData: [],
                selectedBusinessRows: []
            })
        },
        //清空表单
        resetForm (formName) {
            this.$refs[formName].resetFields();
        },
        //保存 数据
        submitForm (formName) {
            let _this = this;
            const { form, noBusinessDataNow, noBusinessData, businessData, orgBusinessData } = this;
            console.log("noBusinessDataNow:", noBusinessDataNow, "businessData:", businessData)
            this.$refs[formName].validate(valid => {
                if (valid) {
                    //计算新增的商机
                    let addBusinessIds = businessData.filter(f => noBusinessData.includes(f)).map(f => f.id);
                    //计算删除的商机
                    let deleteBusinessIds = noBusinessDataNow.filter(f => orgBusinessData.includes(f)).map(f => f.id);
                    console.log("计算新增/删除的商机", addBusinessIds, deleteBusinessIds);
                    Object.assign(form, {
                        addBusinessIds,
                        deleteBusinessIds
                    })
                    save(form)
                        .then(response => {
                            if (response.code === 200) {
                                _this.$message.success("保存成功");
                                _this.hideModal();
                                _this.PageList();
                                _this.selectedKeys = [];
                                _this.selectedData = [];
                            }
                        });
                } else {
                    return false;
                }
            });
        },
        onTableChange (pagination, filters, sorter) {
            Object.assign(this.postData, {
                current: pagination.current,
                size: pagination.pageSize
            });
            Object.assign(this.pagination, {
                current: pagination.current,
                pageSize: pagination.pageSize
            });
            this.PageList();
        },
        changePageSize (e) {
            const value = e.target.value;
            const { pagination } = this;

            console.log(e, value);
            Object.assign(this.postData, {
                "size": value
            });
            Object.assign(this.pagination, {
                pageSize: Number.parseInt(value)
            });
            this.PageList();
        },
        reset () {
            const { basePostData } = this;
            this.postData = { ...basePostData };
        },
        selection (keys, info) {
            console.log(info);
            const ids = new Array();
            info.forEach(function (val) {
                ids.push(val.id);
            });
            this.selectIds = ids;
            this.selectedKeys = keys;
            this.selectedData = info;
        },
    },
    watch: {

    }
};
</script>
<style lang="less">
    .activity {
        .form-inline > .col {
            margin-bottom: 1.5rem !important;
        }
        .ant-advanced-search-form {
            padding: 24px;
            background: #fbfbfb;
        }

        .ant-advanced-search-form .ant-form-item {
            display: flex;
        }

        .ant-advanced-search-form .ant-form-item-control-wrapper {
            flex: 1;
        }

        .components-form-demo-advanced-search .ant-form {
            max-width: none;
        }
        .components-form-demo-advanced-search .search-result-list {
            margin-top: 16px;
            background-color: #fafafa;
            min-height: 200px;
            text-align: center;
            padding-top: 80px;
        }

        .ant-popover-inner {
            z-index: 2999;
        }
    }

    .editIcon-item .ant-form-item-children {
        display: flex !important;
        align-items: baseline;
    }
    .editIcon {
        color: #138496;
        font-size: 1.2rem;
        display: inline-block;
        width: 20%;
        text-align: center;
    }
    @import '~@/style/crm.less';

    .modal2021-8-28-102346 {
        .ant-form-item {
            margin-bottom: 0px !important;
        }
        .ant-input-number {
            height: 32px !important;
            line-height: 32px;
        }
    }
</style>
